*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	background: rgba(235, 241, 246, 1);
	padding:10px 20px;
}
.top{
	width: 100%;
	height: 88px;
	border-radius: 8px;
	background: rgba(64, 93, 179, 1);
	display: flex;
	align-items: center;
	padding: 0 20px;
}
.input{
	width: 150px;
	height: 44px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0);
	border: 1px solid #fff;
	font-size: 18px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.input:hover{
	background: #6f8be0;
		border: 1px solid #93aeff;
}
.btn{
	width: 150px;
	height: 44px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 1);
	border: none;
	font-size: 18px;
	color: #333;
	margin-left: 16px;
}
.btn:hover{
	background:rgb(251 251 255);
	color: rgba(64, 93, 179, 1);
	border: 1px solid #93aeff;
}
.fileName{

	margin-left: 20px;
	display: flex;
	align-items: center;
}
.fileName-text{
	font-size: 13px;
	color: #fff;
		display: none;
}
.content{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 16px;

}
.left{
	width: 100%;
	height: 80vh;
	background: #fff;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	overflow: auto;

}
.img{
	/*height: 100%;*/
	/*width: 100%;*/
}
.bt{ 
	font-size: 18px;
	color: #333333;
	display: flex;
	align-items: center;
	margin-bottom: 10px;

}
.bt:before{
	content: "";
	width: 6px;
	height: 21px;
	background: rgba(61, 108, 255, 1);
	border-radius: 80px;
	margin-right: 6px;
}
.right{
	width: 100%;
	height: 80vh;
	background: #fff;
	border-radius: 8px;
	padding: 20px;
}
.right-title{
	width: 100%;
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	background:url(../img/bg.png) no-repeat center;
	background-size:cover;
	margin-bottom: 20px;
	border-radius: 8px;
	overflow: hidden;
	}
	.title-text{
		font-size: 18px;
		color: #fff;


	}
	.form{
		display: flex;
		flex-direction: column;
		height: 60vh;
		overflow: auto;
	}
	.form-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 26px;
	}
	.form-box-title{
		width: 16%;
		text-align: right;
		font-size: 14px;
		color: rgba(54, 60, 74, 1);
		
	}
	.form-box-ipt{
		width: 82%;
		border: 1px solid rgba(175, 187, 222, 1);     
		height: 80px;
		border-radius: 4px;
		outline: none;
		padding: 6px;
		font-size: 16px;
		color: #333;
		resize:none
	}
	[data-loader='rectangle']
	{
	    position: relative;
	    width: 10px;
	    height: 30px;
		margin-left: 30px;
		margin-top: 10px;
	    -webkit-animation: rectangle infinite 1s ease-in-out -.2s;
	       -moz-animation: rectangle infinite 1s ease-in-out -.2s;
	         -o-animation: rectangle infinite 1s ease-in-out -.2s;
	            animation: rectangle infinite 1s ease-in-out -.2s;
	
	    background-color: #fff;
	}
	[data-loader='rectangle']:before,
	[data-loader='rectangle']:after
	{
	    position: absolute;
	
	    width: 10px;
	    height: 30px;
	
	    content: '';
	
	    background-color: #fff;
	}
	[data-loader='rectangle']:before
	{
	    left: -20px;
	
	    -webkit-animation: rectangle infinite 1s ease-in-out -.4s;
	       -moz-animation: rectangle infinite 1s ease-in-out -.4s;
	         -o-animation: rectangle infinite 1s ease-in-out -.4s;
	            animation: rectangle infinite 1s ease-in-out -.4s;
	}
	[data-loader='rectangle']:after
	{
	    right: -20px;
	
	    -webkit-animation: rectangle infinite 1s ease-in-out;
	       -moz-animation: rectangle infinite 1s ease-in-out;
	         -o-animation: rectangle infinite 1s ease-in-out;
	            animation: rectangle infinite 1s ease-in-out;
	}
	@-webkit-keyframes rectangle
	{
	    0%,
	    80%,
	    100%
	    {
	        height: 35px;
	
	        -webkit-box-shadow: 0 0 #fff;
	                box-shadow: 0 0 #fff;
	    }
	    40%
	    {
	        height: 45px;
	
	        -webkit-box-shadow: 0 -20px #fff;
	                box-shadow: 0 -20px #fff;
	    }
	}
	@-moz-keyframes rectangle
	{
	    0%,
	    80%,
	    100%
	    {
	        height: 35px;
	
	        -webkit-box-shadow: 0 0 #fff;
	                box-shadow: 0 0 #fff;
	    }
	    40%
	    {
	        height: 45px;
	
	        -webkit-box-shadow: 0 -20px #fff;
	                box-shadow: 0 -20px #fff;
	    }
	}
	@-o-keyframes rectangle
	{
	    0%,
	    80%,
	    100%
	    {
	        height: 35px;
	
	        -webkit-box-shadow: 0 0 #fff;
	                box-shadow: 0 0 #fff;
	    }
	    40%
	    {
	        height: 45px;
	
	        -webkit-box-shadow: 0 -20px #fff;
	                box-shadow: 0 -20px #fff;
	    }
	}
	@keyframes rectangle
	{
	    0%,
	    80%,
	    100%
	    {
	        height: 35px;
	
	        -webkit-box-shadow: 0 0 #fff;
	                box-shadow: 0 0 #fff;
	    }
	    40%
	    {
	        height: 45px;
	
	        -webkit-box-shadow: 0 -20px #fff;
	                box-shadow: 0 -20px #fff;
	    }
	}